<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app-5">
        <table border="1" cellspacing="0" width="400">
            <tr>
                <th>序号</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr v-for="(stu, index) in stus">
                <td>{{index + 1}}</td>
                <td>{{stu.stuNum}}</td>
                <td>{{stu.stuName}}</td>
                <td>
                    <table v-if="stu.stuGender == 'M'">
                        男
                    </table>
                    <table v-if="stu.stuGender == 'F'">
                        女
                    </table>
                </td>
                <td>{{stu.stuAge}}</td>

            </tr>
        </table>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app-5',
            data: {
                stus: [
                    {
                        stuNum: '10001',
                        stuName: '张三',
                        stuGender: 'M',
                        stuAge: 20
                    },
                    {
                        stuNum: '10002',
                        stuName: '李四',
                        stuGender: 'M',
                        stuAge: 23
                    },
                    {
                        stuNum: '10003',
                        stuName: '郑红',
                        stuGender: 'F',
                        stuAge: 19
                    }
                ]
            }
        })

    </script>
</body>
</html>




